<template>
    <div class="chart">
        <div class="chart-line">
            <div class="item" v-for="item in priceLeft">
                <div class="text">{{item}}</div>
                <div class="line"></div>
            </div>
        </div>
        <div class="column">
            <div class="column-wrapper">
                <div class="item" v-for="item in comPrice">
                    <div class="rectangle" :style="{'height':getHeight(item)}">
                        <div class="num">{{item.num}}</div>
                    </div>
                    <div class="title">{{item.title}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            priceLeft: [600, 300, 0],   //柱状图左侧价格
            comPrice: [
                {
                    title: '手服网报价',
                    num: 0,
                },
                {
                    title: '市场平均价',
                    num: 0,
                }
            ], 
        }
    },
    props: ['price'],
    mounted() {
        // console.log(this.ApriceLeft)
        this.getChartData()
    },
    methods: {
        //计算出图表数组
        getChartData(){
            //柱状图左侧价格
            var maxprice = Math.ceil(this.price*1.2/100)*100
            // console.log(maxprice[0])
            this.priceLeft=[]
            this.priceLeft.push(maxprice)
            this.priceLeft.push(maxprice/2)
            this.priceLeft.push(0)
            // console.log(this.priceLeft)
            //柱子信息数组
            this.comPrice=[]
            this.comPrice.push(
                {
                    title: '手服网报价',
                    num: this.price,
                }
            )
            this.comPrice.push(
                {
                    title: '市场平均价',
                    num: Math.ceil(this.price*0.94),
                }
            )
        },
        //计算柱子高度
        getHeight(item){
            var flag = item.num/this.priceLeft[0]*100+'%'
            return flag
        }
    }
}
</script>
<style  lang="less" scoped>
    @import "../../common/less/variable.less";

    .chart{
        height:120px;
        position:relative;
        .chart-line{
            width:100%;
            height:100%;
            .item{
                height:40px;
                line-height:40px;
                display:flex;
                .text{
                    flex:0 0 20px;
                    text-align:right;
                    font-size:10px;
                    color:rgba(0,0,0,0.2);
                    margin-top: -16px;
                }
                .line{
                    flex:1;
                    border-top:1px solid rgba(0,0,0,0.1);
                    margin-left:10px;
                }
            }
        }
        .column{
            position:absolute;
            top:0;
            bottom:40px;
            left:30px;
            width:100%;
            padding-right: 30px;
            box-sizing: border-box;
            .column-wrapper{
                display:flex;
                height:100%;
                .item{
                    flex:1;
                    height:100%;
                    text-align:center;
                    position:relative;
                    .rectangle{
                        background:@color-yellow;
                        background: -webkit-gradient(linear, 0 0, 0 100%, from(@color-yellow), to(#fff9b7));
                        position:absolute;
                        bottom:0;
                        left:50%;
                        transform:translate(-50%,0);
                        width:50px;
                        height:0;
                        transition:all .5s ease-in .1s;
                        .num{
                            font-size:12px;
                            color:@color-alert-title;
                            margin-top:-15px;
                        }
                    }
                    &:nth-child(2){
                        .rectangle{
                            background: -webkit-gradient(linear, 0 0, 0 100%, from(@color-blue), to(#bbe3f1));
                        }
                        
                    }
                    .title{
                        position:absolute;
                        bottom:-20px;
                        left:0;
                        font-size:13px;
                        color:@color-alert-con;
                        width:100%;
                    }
                    
                }
            }
        }
    }
</style>
